<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>

<!--导航栏-->
<div class="cl-header container-fluid" id="navbar-header" style="z-index:999" th:fragment="componet-navbar (tabId)">
    <!--  登录/注册/下线js-->
    <script src="/js/login.js"></script>
    <div class="header-content container">
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="/">
                <span class="navbar-logo">codefish</span>
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item" th:class="${tabId==1? 'nav-item active':''}">
                        <a class="nav-link" href="/">首页 <span th:if="tabId==1" class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item" th:class="${tabId==2? 'nav-item active':''}">
                        <a class="nav-link" href="/archive">归档 <span th:if="tabId==2"
                                                                     class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item" th:class="${tabId==3? 'nav-item active':''}">
                        <a class="nav-link" href="/classify">分类 <span th:if="tabId==3" class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item" th:class="${tabId==4? 'nav-item active':''}">
                        <a class="nav-link" href="#">标签 <span th:if="tabId==3" class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item" th:class="${tabId==5? 'nav-item active':''}">
                        <a class="nav-link" href="#">关于 <span th:if="tabId==4" class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item" th:class="${tabId==6? 'nav-item active':''}">
                        <a class="nav-link" href="#">留言 <span th:if="tabId==5" class="sr-only">(current)</span></a>
                    </li>

                    <!--          未登录显示-->
                    <li th:if="${session.userInfo}==null" class="nav-item d-none d-lg-block"
                        style="position: relative;left: 100px;">
                        <!--                        触发登录模态框-->
                        <a class="nav-link" href="#" data-toggle="modal" data-target="#login-modal-component">登录</a>
                    </li>
                    <li th:if="${session.userInfo}==null" class="nav-item d-none d-lg-block"
                        style="position: relative;left: 100px;">
                        <img alt="封面" src="/img/usr-logo-default.png" height="40" width="40" style="border-radius: 50%">
                    </li>
                    <!--                登录模态框-->
                    <form th:if="${session.userInfo}==null" action="/user/login" method="post"
                          id="form-replace-able-form">
                        <div class="modal fade" id="login-modal-component" tabindex="-1" role="dialog"
                             aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                                <div class="modal-content" style="z-index:1050">
                                    <div class="modal-header" style="z-index:1050">
                                        <h5 class="modal-title" id="form-replace-able-title">登录</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body" style="z-index:1050">
                                        <div id="form-replace-able-content">
                                            <input type="hidden" name="action_type" value="login" id="action_type">
                                            <label for="account">账号</label>
                                            <input type="text" class="form-control" name="account" id="account"
                                                   placeholder="输入账号...">
                                            <label for="password">密码</label>
                                            <input type="password" class="form-control" name="password" id="password"
                                                   placeholder="输入密码...">
                                            <span style="font-size: small">没有帐号?<a href="#"
                                                                                   onclick="replaceForm()">点击注册</a></span>
                                            <span style="font-size: small;color: red;float: right"
                                                  id="form-fail-msg"></span>
                                        </div>
                                    </div>
                                    <div class="modal-footer" style="z-index:1050">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                        <button type="button" onclick="submitForm()" class="btn btn-primary"
                                                id="form-replace-able-btn">登录
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                    <!--            已登录则显示-->
                    <li th:if="${session.userInfo}!=null" class="nav-item d-none d-lg-block"
                        style="position: relative;left: 100px;">
                        <!--                        触发个人信息下拉列表-->
                        <a class="nav-link" id="user-info-menu" href="#" data-toggle="dropdown" aria-haspopup="true"
                           aria-expanded="false" th:text="${session.userInfo.username}"></a>
                        <!--                下拉列表-->
                        <div class="dropdown-menu" aria-labelledby="user-info-menu">
                            <a class="dropdown-item" href="#">个人中心</a>
                            <a class="dropdown-item" href="#">内容管理</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" onclick="quitLogin()">退出登录</a>
                        </div>
                    </li>
                    <li th:if="${session.userInfo}!=null" class="nav-item d-none d-lg-block"
                        style="position: relative;left: 100px;">
                        <img alt="用户头像" src="/img/usr-logo-default.png" height="40" width="40"
                             style="border-radius: 50%">
                    </li>
                </ul>

            </div>
        </nav>
    </div>
</div>

</body>
</html>